<template>
  <div class="production-plan">
    <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
    <h3 class="title">过滤过程监控</h3>

    <!-- 基本信息 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="设备名称" style="margin-bottom: 20px;">
            <el-input v-model="formData.equipment_name" placeholder="请输入设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" style="margin-bottom: 20px;">
            <el-input v-model="formData.equipment_number" placeholder="请输入设备编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备状态" style="margin-bottom: 20px;">
            <el-select
              v-model="formData.equipment_status"
              placeholder="请选择设备状态"
              style="width: 100%;"
              :filterable="true"
              :clearable="true"
            >
              <el-option
                v-for="item in workOrderTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运行时间" prop="running_time" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.running_time"
              type="date"
              required
              placeholder="请选择运行时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.temperature" placeholder="请输入温度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="压力" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.pressure" placeholder="请输入压力" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流量" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.flow" placeholder="请输入流量" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="液位" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.liquid_level" placeholder="请输入液位" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="浊度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.turbidity" placeholder="请输入浊度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="浓度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.concentration" placeholder="请输入浓度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="过滤速度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.filtration_speed" placeholder="请输入过滤速度" :min="0" :step="1" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="压力变化" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.pressure_change" placeholder="请输入压力变化" :min="0" :step="1" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="酒液澄清度" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.wine_clarity" placeholder="请输入酒液澄清度" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微生物指标" style="margin-bottom: 20px;">
            <el-input-number v-model="formData.microorganism_index" placeholder="请输入微生物指标" :min="0" :step="1" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="流量传感器" style="margin-bottom: 20px;">
            <el-select
              v-model="formData.flow_sensor"
              placeholder="请选择流量传感器"
              style="width: 100%;"
              :filterable="true"
              :clearable="true"
            >
              <el-option
                v-for="item in workOrderTypeOptions5"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微生物检测" style="margin-bottom: 20px;">
            <el-select
              v-model="formData.microorganism_detection"
              placeholder="请选择微生物检测"
              style="width: 100%;"
              :filterable="true"
              :clearable="true"
            >
              <el-option
                v-for="item in workOrderTypeOptions6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="压力传感器" style="margin-bottom: 20px;">
            <el-select
              v-model="formData.pressure_sensor"
              placeholder="请选择压力传感器"
              style="width: 100%;"
              :filterable="true"
              :clearable="true"
            >
              <el-option
                v-for="item in workOrderTypeOptions7"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="定期取样检测" style="margin-bottom: 20px;">
            <el-input v-model="formData.regular_sampling_detection" placeholder="请输入定期取样检测" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作时间" prop="operation_time" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.operation_time"
              type="date"
              required
              placeholder="请选择操作时间"
              style="width: 100%;"
              disabled
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作人" style="margin-bottom: 20px;">
            <el-input v-model="formData.operators" placeholder="请输入操作人"  disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { Materialread, Materialwrite } from '@/axios/axiosHelper';
import axios from 'axios';
import { th } from 'element-plus/es/locales.mjs';

const formRef = ref(null);
const currentUser = ref("admin");
const router = useRouter();
const route = useRoute();

// 主表单数据
const formData = reactive({
      "id": 0,
      "equipment_name": "",
      "equipment_number": "",
      "equipment_status": "",
      "running_time": "",
      "temperature": 0,
      "pressure": 0,
      "flow": 0,
      "liquid_level": 0,
      "turbidity": 0,
      "concentration": 0,
      "filtration_speed": 0,
      "pressure_change": 0,
      "wine_clarity": 0,
      "microorganism_index": 0,
      "flow_sensor": "",
      "microorganism_detection": "",
      "pressure_sensor": "",
      "regular_sampling_detection": "",
      "operation_time": new Date().toISOString(),
      "operators": currentUser.value,
      "isDel": true
});

// 主表单验证规则
const rules = reactive({
  equipment_name: [
    { required: true, message: '设备名称不能为空', trigger: 'blur' }
  ],
  equipment_number: [
    { required: true, message: '设备编号不能为空', trigger: 'blur' }
  ],
  equipment_status: [
    { required: true, message: '设备状态不能为空', trigger: 'blur' }
  ],
  running_time: [
    { required: true, message: '运行时间不能为空', trigger: 'blur' }
  ],
  temperature: [
    { required: true, message: '温度不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '温度不能小于0', trigger: 'blur' }
  ],
  pressure: [
    { required: true, message: '压力不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '压力不能小于0', trigger: 'blur' }
  ],
  flow: [
    { required: true, message: '流量不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '流量不能小于0', trigger: 'blur' }
  ],
  liquid_level: [
    { required: true, message: '液位不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '液位不能小于0', trigger: 'blur' }
  ],
  turbidity: [
    { required: true, message: '浊度不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '浊度不能小于0', trigger: 'blur' }
  ],
  concentration: [
    { required: true, message: '浓度不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '浓度不能小于0', trigger: 'blur' }
  ],
  filtration_speed: [
    { required: true, message: '过滤速度不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '过滤速度不能小于0', trigger: 'blur' }
  ],
  pressure_change: [
    { required: true, message: '压力变化不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '压力变化不能小于0', trigger: 'blur' }
  ],
  wine_clarity: [
    { required: true, message: '酒液澄清度不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '酒液澄清度不能小于0', trigger: 'blur' }
  ],
  microorganism_index: [
    { required: true, message: '微生物指标不能为空', trigger: 'blur' },
    { type: 'number', min: 0, message: '微生物指标不能小于0', trigger: 'blur' }
  ],
  flow_sensor: [
    { required: true, message: '流量传感器不能为空', trigger: 'blur' }
  ],
  microorganism_detection: [
    { required: true, message: '微生物检测不能为空', trigger: 'blur' }
  ],
  pressure_sensor: [
    { required: true, message: '压力传感器不能为空', trigger: 'blur' }
  ],
  regular_sampling_detection: [
    { required: true, message: '定期取样检测不能为空', trigger: 'blur' }
  ],
  operation_time: [
    { required: true, message: '操作时间不能为空', trigger: 'blur' }
  ],
  operators: [
    { required: true, message: '操作人不能为空', trigger: 'blur' }
  ],
  bomSubject: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
  documentNo: [
    { required: true, message: '不能为空', trigger: 'blur' }
  ],
});

// 明细数据列表
const planDetailsList = ref([]);
const attachments = ref([]);

// 保存主表单
const addjihau = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      axios.post('https://localhost:7229/api/ProcessMonitoring/AddProcessMonitoring', formData)
        .then(response => {
          if (response.data.code === 200) {
            ElMessage.success('过程监控保存成功');
            console.log(response.data.data);
            router.push("/GetProcessMonitoring");
          } else {
            ElMessage.error(`过程监控保存失败：${response.data.message}`);
          }
        });
    } else {
      ElMessage.error('请检查表单输入是否正确');
      return false;
    }
  });
};

//设备状态
const workOrderTypeOptions = ref([
  { value: '正常运行', label: '正常运行' },
  { value: '故障', label: '故障' },
  { value: '待机', label: '待机' },
  { value: '维护中', label: '维护中' },
]);
//流量传感器
const workOrderTypeOptions5 = ref([
  { value: '稳定流量', label: '稳定流量' },
  { value: '动态流量', label: '动态流量' },
  { value: '流量异常报警', label: '流量异常报警' },
  { value: '设备故障报警', label: '设备故障报警' },
  { value: '休眠状态', label: '休眠状态' },
]);
//微生物检测
const workOrderTypeOptions6 = ref([
  { value: '通过', label: '通过' },
  { value: '未通过', label: '未通过' },
  { value: '待审核', label: '待审核' },
  { value: '审核中', label: '审核中' },
]);
//压力传感器
const workOrderTypeOptions7 = ref([
  { value: '正常工作', label: '正常工作' },
  { value: '过载', label: '过载' },
  { value: '故障', label: '故障' },
  { value: '休眠', label: '休眠' },
]);
  </script>
  
  <style scoped>
  .production-plan {
    padding: 30px;
    background-color: #f0f2f5;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }
  
  .title {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
  }
  
  .save-button {
    display: block;
    margin: 0 auto 30px;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .form-container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
  .el-form-item__label {
    color: #34495e;
    font-size: 16px;
    font-weight: 500;
  }
  
  .el-input,
  .el-input-number,
  .el-date-picker {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .el-input:focus,
  .el-input-number:focus,
  .el-date-picker:focus {
    border-color: #42b983;
    outline: none;
    box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
  }
  </style>